<template>
  <div class="cif">
    <div class="ciftop">
      <router-link :to="{ name: 'Sidebar' }">
        <span @click="isfl = true" :class="{ fenl: true, acter: isfl }"
          >分类</span
        >
      </router-link>
      <router-link :to="{ name: 'pinpai' }">
        <span @click="isfl = false" :class="{ fenl: true, acter: !isfl }"
          >品牌</span
        >
      </router-link>
      <a>
        <img src="../assets/sech.png" alt="" />
      </a>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <buttomtab :selectNav="2" class="budnav"></buttomtab>
  </div>
</template>

<script>
// @ is an alias to /src

import buttomtab from "../components/buttomtab.vue";

export default {
  name: "cif",
  components: {
    buttomtab,
  },
  data() {
    return {
      isfl: true,
    };
  },
  created() {
    // console.log(this.$router);
    if (this.$router.history.current.name == "pinpai") {
      this.isfl = false;
    }
    if (this.$router.history.current.name == "Sidebar") {
      this.isfl = true;
    }
  },
};
</script>
<style lang="less" scoped>
.budnav {
  position: fixed;
  width: 100%;
  height: 1.046rem !important;
  left: 0;
  bottom: 0;
  border: 0 !important;
  background-color: #fff;
}
.ciftop {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
}
.cif {
  font-size: 0.26rem;
  width: 100%;
  > .ciftop {
    height: 0.8rem;

    // box-sizing: border-box;
    width: 100%;
    line-height: 0.8rem;
    text-align: center;
    border-bottom: .02rem solid rgb(226, 226, 226);
    > a > span {
      display: inline-block;
      width: 2rem;
      font-size: 0.26rem;
      font-weight: 700;
      height: 100%;
      color: #000;
    }
    .fenl {
      text-align: right;
    }
    > a > img {
      float: right;
      width: 0.28rem;
      margin-top: 0.2rem;
      margin-right: 0.2rem;
    }
  }
}
.acter {
  color: rgb(52, 211, 46) !important;
}
</style>
